/*
 * 要求网页中有某id的div 
 */
function ShowSeqGrap() {
	/*
	 * shopTypeList
	 * 要求以下格式
	 * [
	 * 	0:按顺序的前X类店铺排序+"其它类型"
	 * 	1:1月的,前X类店铺排序+"其它类型",
	 * 	,...
	 * ]
	 * colorList
	 * 要求以下格式
	 * [
	 * 	#123456,
	 *	#123456,
	 * ,....
	 * ]
	 * 一共X+1个元素
	 * 
	 * shopTypeComments
	 * 要求以下格式
	 * [
	 * 	0:按顺序的前X类店铺排序+"其它类型"的数值
	 * 	1:1月的,前X类店铺排序+"其它类型"的数值,
	 * 	,...
	 * ]
	 */

	var X = 8;

	function DrawBigPie(shopTypeList, colorList, shopTypeComments) {

		var svg = d3.select("#seq_graphic")
			.append("svg")
			.append("g");

		svg.append("g")
			.attr("class", "slices");
		svg.append("g")
			.attr("class", "labels");
		svg.append("g")
			.attr("class", "lines");

		var width = 960,
			height = 450,
			radius = Math.min(width, height) / 2;

		var pie = d3.layout.pie()
			.sort(null)
			.value(function(d) {
				return d.value;
			});

		var arc = d3.svg.arc()
			.outerRadius(radius * 0.8)
			.innerRadius(radius * 0.4);

		var outerArc = d3.svg.arc()
			.innerRadius(radius * 0.9)
			.outerRadius(radius * 0.9);
		
		var s_CenterText="各类型总热度占比";
		var centerText = d3.select("#seq_graphic svg").append("text")
			.text(s_CenterText)
			.attr("font-size",16+"px")
			.attr("x",width/2-s_CenterText.length*7.5)
			.attr("y",height/2);

		svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

		var key = function(d) {
			return d.data.label;
		};

		var curMonth = 0;
		var color = d3.scale.ordinal()
			.domain(shopTypeList[curMonth])
			.range(colorList);
		//var sequence_name = 0;

		function GetData() {
			color = d3.scale.ordinal()
				.domain(shopTypeList[curMonth])
				.range(colorList);
			//sequence_name++;
			var labels = color.domain();
			return labels.map(function(label) {
				var v2 = 0; // /typeInMonth[0][label];
				//v2 = typeInMonth[curMonth][label];
				v2 = shopTypeComments[curMonth][label];
				//MiuTK.log(curMonth,label,v2);
				return {
					label: label,
					value: v2
				}
			});
		}

		change(GetData());

		d3.select("#seq_next_button")
			.on("click", function() {
				curMonth++;
				curMonth %= 13;
				change(GetData());
			});
		d3.select("#seq_pre_button")
			.on("click", function() {
				curMonth += 13;
				curMonth--;
				curMonth %= 13;
				change(GetData());
			});

		function change(data) {

			/* ------- PIE SLICES -------*/
			var slice = svg.select(".slices").selectAll("path.slice")
				.data(pie(data), key);

			slice.enter()
				.insert("path")
				.style("fill", function(d) {
					return color(d.data.label);
				})
				.attr("class", "slice");

			slice
				.transition().duration(1000)
				.attrTween("d", function(d) {
					this._current = this._current || d;
					var interpolate = d3.interpolate(this._current, d);
					this._current = interpolate(0);
					return function(t) {
						return arc(interpolate(t));
					};
				})

			slice.exit()
				.remove();

			/* ------- TEXT LABELS -------*/

			var text = svg.select(".labels").selectAll("text")
				.data(pie(data), key);

			text.enter()
				.append("text")
				.attr("dy", ".35em")
				.text(function(d) {
					return d.data.label;
				});

			function midAngle(d) {
				return d.startAngle + (d.endAngle - d.startAngle) / 2;
			}

			text.transition().duration(1000)
				.attrTween("transform", function(d) {
					this._current = this._current || d;
					var interpolate = d3.interpolate(this._current, d);
					this._current = interpolate(0);
					return function(t) {
						var d2 = interpolate(t);
						var pos = outerArc.centroid(d2);
						pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
						return "translate(" + pos + ")";
					};
				})
				.styleTween("text-anchor", function(d) {
					this._current = this._current || d;
					var interpolate = d3.interpolate(this._current, d);
					this._current = interpolate(0);
					return function(t) {
						var d2 = interpolate(t);
						return midAngle(d2) < Math.PI ? "start" : "end";
					};
				});

			text.exit()
				.remove();

			/* ------- SLICE TO TEXT POLYLINES -------*/

			var polyline = svg.select(".lines").selectAll("polyline")
				.data(pie(data), key);

			polyline.enter()
				.append("polyline");

			polyline.transition().duration(1000)
				.attrTween("points", function(d) {
					this._current = this._current || d;
					var interpolate = d3.interpolate(this._current, d);
					this._current = interpolate(0);
					return function(t) {
						var d2 = interpolate(t);
						var pos = outerArc.centroid(d2);
						pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
						return [arc.centroid(d2), outerArc.centroid(d2), pos];
					};
				});

			polyline.exit()
				.remove();
				
			//---------------------设定文本---------------------------//
			s_CenterText="全年各类型总热度占比";
			if(curMonth!=0){
				s_CenterText=curMonth+"月各类型热度占比";
			}
		centerText 
			.text(s_CenterText)
			.attr("font-size",16+"px")
			.attr("x",width/2-s_CenterText.length*7.5)
			.attr("y",height/2);
		};

	}

	var shopTypeList = [];
	var colorList;
	var typeInMonth = dataVar.typeInMonth;
	var shopTypeComments = [];

	for(var mi = 0; mi < 13; mi++) {
		var ttyp = [];
		var dbg_typeAndCount = [];
		var n = dataVar.shopType.numMap.length;
		for(var i = 0; i < n; i++) { //生成种类列表
			var s = dataVar.shopType.numMap[i];
			ttyp.push(s);
			//dbg_typeAndCount[i]={name:s};
		}
		for(var i = 0; i < n; i++) { //排序
			for(var t = i; t < n; t++) {
				var a = 0;
				if(typeInMonth[mi][ttyp[i]] !== undefined) {
					a = typeInMonth[mi][ttyp[i]];
				}
				var b = 0;
				if(typeInMonth[mi][ttyp[t]] !== undefined) {
					b = typeInMonth[mi][ttyp[t]];
				}
				if(a < b) {
					var t2 = ttyp[i];
					ttyp[i] = ttyp[t];
					ttyp[t] = t2;

					/*t2=dbg_typeAndCount[i];
					dbg_typeAndCount[i]=dbg_typeAndCount[t];
					dbg_typeAndCount[i]=t2;*/
				}
			}
		}
		//		for(var i=0;i<n;i++){
		//			shopTypeComments[i]={};
		//			shopTypeComments[i].name=ttyp[i];
		//			shopTypeComments[i].num=typeInMonth[mi][ttyp[i]];
		//		}
		var tname;
		shopTypeList[mi] = [];
		shopTypeComments[mi] = [];
		for(var i = 0; i < X; i++) { //复制前X个
			shopTypeList[mi][i] = ttyp[i];
			tname = shopTypeList[mi][i];
			shopTypeComments[mi][tname] = typeInMonth[mi][ttyp[i]];
		}
		shopTypeList[mi][i] = "其余几种";
		tname = shopTypeList[mi][i];
		shopTypeComments[mi][tname] = 0;
		for(var i2 = i; i2 < n; i2++) {
			var t3 = typeInMonth[mi][ttyp[i2]];
			t3 = (MiuTK.isNumber(t3) ? t3 : 0);
			//MiuTK.log(t3);
			shopTypeComments[mi][tname] += t3;
		}
	}

	colorList = [
		/*"#f15b6c", "#f391a9", "#987165", "#f26522", "#f3715c",
		"#de773f", "#905d1d", "#8a5d19", "#845538"
		,"#f15b6c",*/
			"#f391a9","#987165","#f26522","#f3715c","#de773f",
			"#905d1d","#8a5d19","#845538","#f15b6c","#f391a9",
			"#987165","#f26522","#f3715c","#de773f","#905d1d",
			"#8a5d19","#845538"
	];
	DrawBigPie(shopTypeList, colorList, shopTypeComments);
}